<template>
	<!-- 兑换记录 -->
	<view class="ExchangeRecords">
		<template v-if="arr.length > 0">
			<view>
				<view class="main">
					<!-- <view class="main-title">
						2023年3月
					</view> -->
					<view class="main-item" v-for="item in arr" :key="item.id">
						<view class="main-item-image">
							<image :src="'https://songcan.xyct1688.com/' + item.exchange_image" mode=""></image>
						</view>
						<view class="main-item-content">
							<view class="main-item-content-title">
								{{ item.exchange_name }}
							</view>
							<view class="main-item-content-integral">
								{{ item.point }}<text>积分</text>
							</view>
							<view class="">
								<text>{{ item.date }}</text>
								<text>{{ item.pay_time | formatTime }}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</template>
		<template v-else>
			<view>
				<image style="width: 750rpx;height: 750rpx;"
					src="https://img.zcool.cn/community/01d29258cce264a801219c77ec3f60.png" mode=""></image>
			</view>
		</template>
	</view>
</template>

<script>
const $api = require('@/utils/request.js').API
export default {
	data() {
		return {
			arr: [

			]
		}
	},
	onLoad() {
		this.IntegralRecord()
	},
	methods: {
		IntegralRecord() {
			$api.postIntegralRecord({ token: uni.getStorageSync('token') }).then(res => {
				this.arr = res.data.data.list
			})
		}
	}
}
</script>

<style lang="less" scoped>
.ExchangeRecords {
	.main {
		margin: 0 22rpx;

		.main-title {
			// width: 169rpx;
			height: 33rpx;
			font-size: 34rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #333333;
			margin-bottom: 25rpx;
			// padding-top: 36rpx;
			margin-top: 36rpx;
		}

		.main-title:first-child {
			// padding-top: 25rpx;
			margin-top: 25rpx;
		}

		.main-item {
			display: flex;
			align-items: center;
			width: 706rpx;
			height: 155rpx;
			margin-bottom: 5rpx;
			border-radius: 4rpx;
			background: #F9F9F9;
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #808080;

			.main-item-image {
				image {
					width: 107rpx;
					height: 110rpx;
					background: #FF7074;
					border-radius: 18rpx;
					margin: 0 20rpx;
				}
			}

			.main-item-content {
				.main-item-content-title {
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #333333;
					padding-bottom: 11rpx;
				}

				.main-item-content-integral {
					padding-bottom: 13rpx;
				}
			}
		}
	}
}
</style>